<template>
    <div class="v-data">
        <div class="v-data-info">
            <Alert>
                <p>1.新版ckeditor编辑器</p>
                <p>2.示例暂时使用本地上传，如果需要oss上传可自行到组件修改</p>
                <p>3.通过为.md-ckeditor 设置样式控制编辑器内展示样式，样式位置 style/theme.less</p>
                <p>4.前端展示时使用本页 #editor样式，可根据实际调整</p>
                <p>5.粘贴时编辑会自动去除样式，防止粘贴来的内容样式干扰前端展示</p>
            </Alert>
            <Row>
                <Col span="12">
                    <div class="md-ckeditor">
                        <editor v-model="content"></editor>
                    </div>
                </Col>
                <Col span="12">
                    <Card>
                        <span slot="title">预览</span>
                        <div id="editor" v-html="content"></div>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import editor from "@/components/editor/ckeditor5";

    export default {
        data() {
            return {
                content: ''
            }
        },
        components: {editor},
        mounted() {
            setTimeout(() => {
                this.content = '<h2>Bilingual Personality Disorder</h2><figure class="image"><img src="https://oscimg.oschina.net/oscnet/up-adea9629b142e396677c9c4eea801563194.png"><figcaption>One language, one person.</figcaption></figure><p>One of the very first experiments conducted on this topic dates back to 1964. <a href="https://www.researchgate.net/publication/9440038_Language_and_TAT_content_in_bilinguals">In the experiment</a> designed by linguist Ervin-Tripp who is an authority expert in psycholinguistic and sociolinguistic studies, adults who are bilingual in English in French were showed series of pictures and were asked to create 3-minute stories. In the end participants emphasized drastically different dynamics for stories in English and French.</p><p>Another ground-breaking experiment which included bilingual Japanese women married to American men in San Francisco were asked to complete sentences. The goal of the experiment was to investigate whether or not human feelings and thoughts are expressed differently in <strong>different language mindsets</strong>. is a sample from the the experiment:</p><figure class="table"><table><thead><tr><th>测试啊</th><th>English</th><th>Japanese</th></tr></thead><tbody><tr><td>Real friends should</td><td>Be very frank</td><td>Help each other</td></tr><tr><td>I will probably become</td><td>A teacher</td><td>A housewife</td></tr><tr><td>When there is a conflict with family</td><td>I do what I want</td><td>It\'s a time of great unhappiness</td></tr></tbody></table></figure><p>More recent <a href="https://books.google.pl/books?id=1LMhWGHGkRUC">studies</a> show, the language a person speaks affects their cognition, behaviour, emotions and hence <strong>their personality</strong>. This shouldn’t come as a surprise <a href="https://en.wikipedia.org/wiki/Lateralization_of_brain_function">since we already know</a> that different regions of the brain become more active depending on the person’s activity at hand. Since structure, information and especially <strong>the culture</strong> of languages varies substantially and the language a person speaks is an essential element of daily life.</p><blockquote><p>这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅这是引用横幅</p></blockquote>';
            }, 1000)
        }
    }
</script>

<style lang="less">
    //以下样式要添加到展示页面中
    #editor {
        p{
            margin-bottom: 20px;
        }
        .image {
            display: table;
            clear: both;
            text-align: center;
            margin: 0 auto;
        }

        .image {
            & > img {
                display: block;
                margin: 0 auto;
                max-width: 100%;
            }

            & > figcaption {
                display: table-caption;
                caption-side: bottom;
                word-break: break-word;
                color: #333;
                background-color: #f7f7f7;
                padding: .6em;
                font-size: .75em;
                outline-offset: -1px;
            }
        }

        .table {
            margin: 1em auto;
            display: table;

            table {
                border-collapse: collapse;
                border-spacing: 0;
                width: 100%;
                height: 100%;
                border: 1px double #b3b3b3;
            }

            table th {
                font-weight: 700;
                background: #fafafa;
            }

            table td, table th {
                min-width: 2em;
                padding: .4em;
                border: 1px solid #d9d9d9;
            }
        }

        blockquote {
            overflow: hidden;
            padding-right: 1.5em;
            padding-left: 1.5em;
            margin-left: 0;
            margin-right: 0;
            font-style: italic;
            border-left: 5px solid #ccc;
        }
    }
</style>
